<template>
  <section>
    <p class="allTitle mgb">Top apps</p>
    <div class="topApps">
      <div v-for="(item,index) in topAppsList" :key="index">
        <img :src="item.url" :alt="item.name">
        <span>{{item.name}}</span>
      </div>
    </div>
  </section>
  <section>
    <p class="allTitle mgbt">Quick Searches</p>
    <ul class="qsList">
      <li> <i></i> Today in history</li>
      <li> <i></i> New movies</li>
      <li> <i></i> Top news</li>
      <li> <i></i> Markets today</li>
    </ul>
  </section>
</template>
<script>
export default {
  setup(){
    const topAppsList = [{
      url: require('@/assets/img/icon/terminal.png'),
      name: 'Terminal'
    },{
      url: require('@/assets/img/icon/github.png'),
      name: 'Github'
    },{
      url: require('@/assets/img/icon/code.png'),
      name: 'VS Code'
    },{
      url: require('@/assets/img/icon/spotify.png'),
      name: 'Spotify'
    },{
      url: require('@/assets/img/icon/edge.png'),
      name: 'Edge'
    }]
    return {
      topAppsList
    }
  }
}
</script>
<style lang="scss" scoped>
.allTitle{
  font-size: 12px;
  color: #666;
  font-weight: 600;
}
.mgb{
  margin-bottom: 16px;
}
.mgbt{
  margin-bottom: 10px;
}
.topApps{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  div{
    box-sizing: border-box;
    width: 19%;
    height: 72px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 2px lightgrey;
    text-align: center;
    padding: 15px 0 5px;
    font-size: 12px;
    cursor: pointer;
    img{
      display: block;
      margin: auto;
      width: 25%;
      margin-bottom: 8px;
    }
  }
}
.qsList{
  box-sizing: border-box;
  padding-left: 15px;
  li{
    height: 40px;
    line-height: 40px;
    color: #111;
    cursor: pointer;
    font-size: 12px;
    i{
      padding-left: 16px;
      padding-top: 16px;
      margin-right: 10px;
    }
    &:nth-of-type(1) i{
      background: url('~@/assets/img/icon/clock.png') no-repeat center bottom/contain;
    }
    &:nth-of-type(2) i{
      background: url('~@/assets/img/icon/movie.png') no-repeat center bottom/contain;
    }
    &:nth-of-type(3) i{
      background: url('~@/assets/img/icon/newspaper.png') no-repeat center bottom/contain;
    }
    &:nth-of-type(4) i{
      background: url('~@/assets/img/icon/market.png') no-repeat center bottom/contain;
    }
  }
}
</style>